@import './base.css';

/* Tech-focused color scheme */
:root {
  --color-primary: #0071e3;
  --color-primary-dark: #0058B9;
  --color-primary-light: #42a5f5;
  
  --color-secondary: #6e6e73;
  --color-secondary-dark: #86868b;
  --color-secondary-light: #a1a1a6;
  
  --color-danger: #ff3b30;
  --color-danger-dark: #d70015;
  --color-danger-light: #ff6961;
  
  --color-warning: #ff9500;
  --color-warning-dark: #c93400;
  --color-warning-light: #ffb340;
  
  --color-success: #34c759;
  --color-success-dark: #248a3d;
  --color-success-light: #30db5b;
  
  /* Tech UI colors */
  --tech-bg-dark: #121212;
  --tech-bg-light: #f5f5f7;
  --tech-accent-blue: #007aff;
  --tech-accent-cyan: #00c7be;
  --tech-accent-purple: #5e5ce6;
  --tech-gradient-start: #2c3e50;
  --tech-gradient-end: #1a1e2d;
  --tech-card-bg: rgba(255, 255, 255, 0.85);
  --tech-card-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --tech-border-color: rgba(0, 122, 255, 0.2);
}

/* Modern tech-focused styles */
.apple-card {
  background-color: var(--tech-card-bg);
  border-radius: 12px;
  box-shadow: var(--tech-card-shadow);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--tech-border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.apple-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.apple-button {
  background-color: var(--color-primary);
  color: white;
  border-radius: 8px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.4);
}

.apple-button:hover {
  background-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.6);
  transform: translateY(-1px);
}

.apple-button:focus {
  outline: none;
}

.apple-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

.apple-text {
  color: #6e6e73;
}

/* 重置一些默认的限制 */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background-color: var(--tech-bg-light);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#app {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

/* 修改大屏幕布局，确保标题正常显示 */
@media (min-width: 1024px) {
  body {
    display: block; /* 改为block而不是flex，防止布局问题 */
    width: 100%;
  }

  #app {
    width: 100%;
    max-width: 100%;
  }
}
